import 'dart:async';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:ui' as ui;

import 'package:flutter/services.dart';

class ClipAssetImgPage extends StatefulWidget {
  const ClipAssetImgPage({super.key});

  @override
  State<ClipAssetImgPage> createState() => _ClipAssetImgPageState();
}

class _ClipAssetImgPageState extends State<ClipAssetImgPage> {
  final String imageUrl = 'assets/image/ceshi.jpeg';
  ImageProvider? originalImage;
  Uint8List? clippedImageBytes;
  bool isClipped = false;
  bool isLoading = false;
  ui.Image? jietuImg;

  @override
  void initState() {
    super.initState();
    originalImage = NetworkImage(imageUrl);
  }

  Future<void> clipImage() async {
    setState(() {
      isLoading = true;
    });

    try {
      // 等待图片加载完成
      // final ui.Image image = await completer.future;
      final ByteData data = await rootBundle.load(imageUrl);
      final Uint8List bytes = data.buffer.asUint8List();
      final ui.Image image = await decodeImageFromList(bytes);

      // 计算裁剪区域（中间部分）
      final int width = image.width;
      final int height = image.height;
      final int centerX = width ~/ 2;
      final int centerY = height ~/ 2;

      // 裁剪区域大小（这里取图片宽高的一半作为裁剪区域）
      final int cropWidth = width ~/ 2;
      final int cropHeight = height ~/ 2;

      // 计算裁剪区域的左上角坐标
      final int left = centerX - cropWidth ~/ 2;
      final int top = centerY - cropHeight ~/ 2;

      // print('${left},${top},${width},${height},${cropWidth},${cropHeight}');

      // 创建一个新的图片，用于绘制裁剪后的图片
      final ui.PictureRecorder recorder = ui.PictureRecorder();
      final Canvas canvas = Canvas(recorder);
      final Paint paint = Paint();

      // 使用drawImageRect进行真实裁剪 使用 canvas.drawImageRect 方法进行实际的图片裁剪，该方法从源图像的指定区域(src)裁剪内容并绘制到目标区域(dst)
      canvas.drawImageRect(
        image,
        Rect.fromLTWH(
          left.toDouble(),
          top.toDouble(),
          cropWidth.toDouble(),
          cropHeight.toDouble(),
        ),
        Rect.fromLTWH(0, 0, cropWidth.toDouble(), cropHeight.toDouble()),
        paint,
      );

      // 将绘制的内容转换为图片
      final ui.Picture picture = recorder.endRecording();
      final ui.Image croppedImage = await picture.toImage(
        cropWidth,
        cropHeight,
      );

      // 将图片转换为字节数据
      final ByteData? byteData = await croppedImage.toByteData(
        format: ui.ImageByteFormat.png,
      );
      final Uint8List pngBytes = byteData!.buffer.asUint8List(); // 这个数据可以传递给后台

      setState(() {
        clippedImageBytes = pngBytes;
        isClipped = true;
        isLoading = false;
      });
    } catch (e) {
      print('裁剪图片时出错: $e');
      setState(() {
        isLoading = false;
      });
    }
  }

  GlobalKey _cropTargetKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Clip asset Image Page")),
      body: SingleChildScrollView( // 这个可以保证裁剪比较完全
        child: RepaintBoundary(
          key: _cropTargetKey,
          child: Column(
            // mainAxisAlignment: MainAxisAlignment.center,
            children: [
              if (jietuImg != null)
                Column(
                  children: [
                    FutureBuilder<ByteData?>(
                      future: jietuImg!.toByteData(
                        format: ui.ImageByteFormat.png,
                      ),
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return Image.memory(
                            snapshot.data!.buffer.asUint8List(),
                            // height: 500,
                          );
                        }
                        return const CircularProgressIndicator();
                      },
                    ),
                    Text('裁剪后的图片'),
                  ],
                ),
        
              ElevatedButton(
                onPressed: () async {
                  Size size = MediaQuery.of(context).size;
                  print('屏幕大小: ${size.width} x ${size.height}');
                  double pixelRatio = MediaQuery.of(context).devicePixelRatio;
                  RenderRepaintBoundary boundary =
                      _cropTargetKey.currentContext?.findRenderObject()
                          as RenderRepaintBoundary;
        
                  ui.Image image = await boundary.toImage(
                    // pixelRatio: pixelRatio,
                    pixelRatio: 1,
                  );
                  setState(() {
                    jietuImg = image;
                  });
                  print('图片大小: ${image.width} x ${image.height}');
                },
                child: Text('获取截图'),
              ),
        
              // 显示原始图片或裁剪后的图片
              if (!isClipped)
                Image.asset(imageUrl)
              else
                Column(
                  children: [
                    const Text(
                      '原图：',
                      style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                    ),
                    SizedBox(height: 10),
                    Image.asset(imageUrl, height: 150),
                    SizedBox(height: 20),
                    const Text(
                      '裁剪后（中间部分）：',
                      style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                    ),
                    SizedBox(height: 10),
                    clippedImageBytes != null
                        ? Image.memory(
                            clippedImageBytes!,
                          ) // 从内存中的二进制数据（通常是字节数据）创建图像的一个构造函数
                        : Text('裁剪失败'),
                  ],
                ),
              Container(
                height: 900,
                decoration: BoxDecoration(color: Colors.red),
              ),
              Text('截图区域策划师'),
              if (isLoading)
                CircularProgressIndicator()
              else
                ElevatedButton(
                  onPressed: () {
                    clipImage();
                  },
                  child: Text('裁剪'),
                ),
            ],
          ),
        ),
      ),
    );
  }
}
